import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button, Modal, Row, Col, DatePicker } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getpdbIssuanceList } from './service'
import TableTitle from '../../../components/TableTitle'
// 日期选择器国际化配置
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

export default () => {

    // add模态框控制
    const [isAddModalVisible, setIsAddModalVisible] = useState(false);
    // edit模态框配置
    const [isEditModalVisible, setIsEditModalVisible] = useState(false);
    // 添加用户数据表单验证 获取表单
    const addFormRef: any = React.createRef();

    // 新增
    const addInfo = () => {
        setIsAddModalVisible(true);
    };

    // 处理新增
    const handleAddOk = async () => {
        // 获取新增表单的值
        var reponse = addFormRef.current?.getFieldsValue()
        console.log(reponse);
        // 表单验证
        addFormRef.current.validateFields().then(() => {
            // 重置表单
            addFormRef.current.resetFields();
            // 关闭模态框
            setIsAddModalVisible(false)
        }).catch(() => { })
    }

    // 创建的 form 控制实例 用户数据修改表单交互 
    const [editForm] = Form.useForm();

    // 修改表格
    const edit = (record: any) => {
        let { configurationDate, effectiveDate, expirationDate } = record
        record.configurationDate = moment(configurationDate)
        record.effectiveDate = moment(effectiveDate)
        record.expirationDate = moment(expirationDate)
        setIsEditModalVisible(true)
        // edit模态框的form表单回显数据
        editForm.setFieldsValue(record);
    }
    // 处理修改
    const handleEditOk = async () => {
        // 获取新增表单的值
        var reponse = editForm.getFieldsValue()
        console.log(reponse);
        // 表单验证
        editForm.validateFields().then(() => {
            // 重置表单
            editForm.resetFields();
            // 关闭模态框
            setIsEditModalVisible(false)
            // 表格重新渲染
            actionRef.current?.reload()
        }).catch(() => { })
    }


    // 表头数据
    const columns: ProColumns<columnsDataType>[] = columnsData

    // 操作行数据 自定义操作行
    // text当前的值,foreach下面的执行完才有值 record当前行的全部数据 inde数组下标
    const actionRender: any = (text: any, record: any, index: number) =>
        [<a key={record.id} onClick={() => edit(record)}>修改</a>]

    // 金额行数据 自定义靠右
    const moneyRender: any = (text: any, record: any, index: number) =>
        [<p key={record.id} style={{ textAlign: 'right', margin: 0 }}>{text}</p>]

    // 自定义数据的表格头部数据
    columns.forEach((item: any) => {
        item.dataIndex === 'action' ? item.render = actionRender : undefined
        item.dataIndex === 'pdbAmount' ? item.render = moneyRender : undefined
    });

    // Table action 的引用，便于自定义触发，为了下面的reload
    const actionRef = React.useRef<ActionType>();
    return (
        <div>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
                headerTitle={<TableTitle title='运营投放配置' />}
                actionRef={actionRef}
                bordered
                // 表头
                columns={columns}
                // 请求获取的数据
                request={
                    async params => {
                        return getpdbIssuanceList(params);
                    }
                }
                rowKey="id"
                // 本地存储表格列的显示数据
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                // 搜索框配置
                search={{
                    labelWidth: 'auto',
                }}
                // 搜索表单的配置
                form={{
                    ignoreRules: false,
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
                //设置工具栏按钮及事件
                toolBarRender={() => [
                    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={addInfo}>
                        新增
                    </Button>,
                ]}
            />
            {/* 新增模态框 */}
            <Modal
                title="运营投放配置添加"
                centered
                visible={isAddModalVisible}
                onOk={handleAddOk}
                onCancel={() => setIsAddModalVisible(false)}
                width={700}>
                <Form
                    ref={addFormRef}
                    name="basic"
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="配置编号"
                                name="configurationNo"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="投入和平币数量"
                                name="pdbAmount"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    },
                                    {
                                        message: '只能输入数字',
                                        pattern: /^\d+$|^\d*\.\d+$/g
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="配置日期"
                                name="setupTime"
                            >
                                <DatePicker locale={locale} />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="生效日期"
                                name="effectiveDate"
                            >
                                <DatePicker locale={locale} />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="失效日期"
                                name="expirationDate"
                            >
                                <DatePicker locale={locale} />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
            {/* 修改模态框 */}
            <Modal
                title="和平币发放配置修改"
                centered
                visible={isEditModalVisible}
                onOk={handleEditOk}
                onCancel={() => setIsEditModalVisible(false)}
                getContainer={false}
                width={700}>
                <Form form={editForm}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                >
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="配置编号"
                                name="configurationNo"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="投入和平币数量"
                                name="pdbAmount"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="修改日期"
                                name="editTime"
                            >
                                <DatePicker locale={locale} format="YYYY-MM-DD" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="生效日期"
                                name="effectiveDate"
                            >
                                <DatePicker locale={locale} format="YYYY-MM-DD" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="失效日期"
                                name="expirationDate"
                            >
                                <DatePicker locale={locale} format="YYYY-MM-DD" />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

        </div>
    );
};